<template>
  <div>
    <span style="font-size: 13px"
      >注意：默认仅支持单表查询,多表查询需在对应mapper.xml实现默认page sql代码</span
    >
    <el-table :data="queryJson" height="67vh" row-key="id" border stripe style="width: 100%">
      <el-table-column type="expand">
        <template #default="scope">
          <el-form :inline="true" size="small" :model="scope" class="demo-form-inline">
            <span v-if="scope.row.isShow">
              <el-form-item label="查询方式">
                <el-select
                  v-model="scope.row.queryMode"
                  style="width: 100px"
                  placeholder="Select"
                  size="small"
                >
                  <el-option
                    v-for="(item, index) in editTypes.filter(
                      (editType) => editType.value === scope.row.type.value
                    )[0].queryModes"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <span v-if="scope.row.type.value === 'select'">
                <el-form-item label="选项数据源">
                  <el-select
                    v-model="scope.row.type.select.optionId"
                    filterable
                    placeholder="Select"
                    size="small"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="(item, index) in options.options"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="多选">
                  <el-switch v-model="scope.row.type.select.multiple" />
                </el-form-item>
                <el-form-item label="多选/数量限制(0或空表示不限制)">
                  <el-input-number
                    controls-position="right"
                    v-model="scope.row.type.select.multipleLimit"
                  />
                </el-form-item>
                <el-form-item label="树状">
                  <el-switch v-model="scope.row.type.select.tree" />
                </el-form-item>
              </span>

              <el-form-item label="宽度">
                <el-input-number controls-position="right" v-model="scope.row.width" />
              </el-form-item>
            </span>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="关联网格字段" width="230" prop="type">
        <template #default="scope">
          <el-select
            v-model="scope.row.gridField"
            filterable
            @change="selectField($event, scope.row)"
            placeholder="未关联"
            size="small"
          >
            <el-option
              v-for="item in fieldJsonCopy"
              :key="item.field"
              :label="item.label"
              :value="item.field"
              :disabled="item.disabled"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="显示"
        prop="isShow"
        width="70"
        :filters="[
          { text: '显示', value: true },
          { text: '隐藏', value: false }
        ]"
        :filter-method="filterHandler"
      >
        <template #default="scope">
          <el-switch size="small" v-model="scope.row.isShow" />
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name">
        <template #default="scope">
          <el-input v-model="scope.row.label" size="small" clearable />
        </template>
      </el-table-column>
      <el-table-column label="字段名" prop="field">
        <template #default="scope">
          <el-input
            v-model="scope.row.field"
            :disabled="!!scope.row.gridField"
            size="small"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="类型" width="110" prop="type">
        <template #default="scope">
          <el-select
            v-model="scope.row.type.value"
            @change="changeEditTypes($event, scope.row)"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="(item, index) in editTypes"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" prop="isSort">
        <template #default="scope">
          <OperationView v-model="queryJson" :scope />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import OperationView from './OperationView.vue'
import { ref } from 'vue'
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const storeOptionData = useOptionDataStore()
const { options } = storeToRefs(storeOptionData)
// 字段配置列表
const props = defineProps(['fieldJson'])
// 解除与 fieldJson 双向绑定,只进行初始化
const fieldJsonCopy = ref(JSON.parse(JSON.stringify(props.fieldJson)))
const queryJson = defineModel({ default: [] })
// {
//   default: [
//     {
//       field: 'default',
//       label: '默认',
//       isShow: true,
//       type: {
//         value:'select',
//         select:{
//           optionId:'',
//           tree:false,
//           multiple:false,
//           multipleLimit:0
//         },
//         queryModes:["=","%like%","%like","like%"]
//       },
//       queryMode: '%like%',
//       gridField: null // 绑定网格字段
//     }
//   ]
// }

// 初始化一些数据
load()
function load() {
  // 已选择的关联字段标记为不可选
  queryJson.value.forEach((item) => {
    fieldJsonCopy.value.forEach((item2) => {
      if (item.field === item2.field) {
        item2.disabled = true
      }
    })
  })
  // 初始化选项列表
  storeOptionData.refreshOptions()
}
// 查询输入数据类型
const editTypes = [
  {
    value: 'text',
    label: '文本',
    queryModes: ['=', '%like%', '%like', 'like%'] // 查询方式
  },
  {
    value: 'number',
    label: '数字',
    queryModes: ['=', '%like%', '%like', 'like%', '>', '<', 'between']
  },
  {
    value: 'select',
    label: '选项',
    queryModes: ['in']
  },
  {
    value: 'date',
    label: '日期',
    queryModes: ['=', '%like%', '%like', 'like%', '>', '<', 'between']
  },
  {
    value: 'datetime',
    label: '日期时间',
    queryModes: ['=', '%like%', '%like', 'like%', '>', '<', 'between']
  },
  {
    value: 'time',
    label: '时间',
    queryModes: ['=', '%like%', '%like', 'like%', '>', '<', 'between']
  },
  {
    value: 'switch',
    label: '开关',
    queryModes: ['=']
  }
]
function selectField(selectfield, field) {
  fieldJsonCopy.value.forEach((item) => {
    if (item.field === selectfield) {
      // 该字段标记为不可选
      item.disabled = true
      // 释放原绑定对象网格字段为可选
      if (field.gridField) {
        fieldJsonCopy.value.forEach((item2) => {
          if (item2.field === field.field) {
            item2.disabled = false
          }
        })
      }
      // 配置同步网格字段
      field.field = item.field
      field.label = item.label
      field.type.value = editTypes[0].value
      field.queryMode = editTypes[0].queryModes[0]
    }
  })
}

// 更换类型时，判断当前搜索模式是否符合该类型，不符合则默认使用第一个模式
function changeEditTypes(type, queryField) {
  for (const index in editTypes) {
    const editType = editTypes[index]
    if (type === editType.value) {
      if (!editType.queryModes[0].includes(queryField.queryMode)) {
        queryField.queryMode = editType.queryModes[0]
      }
    }
  }
}
// 过滤字段
function filterHandler(value, row, column) {
  return row.isShow === value
}
</script>
<style scoped>
.el-form {
  margin: 0px 10px;
}
:deep(.el-table__expanded-cell) {
  background-color: hsl(0, 0%, 95%) !important;
}
</style>
